<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script type="text/javascript" src="icon/iconfont.js"></script>
        <link rel="stylesheet" type="text/css" href="icon/iconfont.css">

        <link href="https://cdn.bootcss.com/Swiper/4.2.2/css/swiper.min.css" rel="stylesheet">
        <script src="https://cdn.bootcss.com/Swiper/4.2.2/js/swiper.min.js"></script>
        <link rel="stylesheet" type="text/css" href="css/main.css">
        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
    </head>
    <body>
        <div class="container">
            <div class="main_left_menu">
                <div class="cell cell_avator">
                    <img class="avator" src="./imgs/login_logo.jpeg"></img>
                    <span>{{name}}</span>
                </div>

                <div class="cell cell_icon_txt" v-for='item in menu'>
                    <!-- <img class="icon"></img> -->
                    <i :class='item.icon'></i>
                    <span>{{item.title}}</span>
                </div>
                
            </div>

            <div class="main_right_panel">
                <div class="bar">
                    <input type="text" name="" placeholder="搜索" class="search_input">
                    <div class="notice_div">
                        <a href="./index.html" class="setting"></a>
                        <a href="#" class="msg"></a>
                    </div>
                </div>
                <!-- 内容 -->
                <div class="conten_panel">
                    <span class="title">Recom
                </span>
                    <div class="content_body">
                        
                        <div class="item" v-for='item in items'>
                            <img src="./imgs/login_logo.jpeg" @click='itemclickAction()'>
                            <div class="item_title">{{item}}</div>
                        </div>

                    </div>
                </div>  
                <!-- 内容 -->
                <div class="conten_panel">
                    <span class="title">Recom
				</span>
                    <div class="content_body">
                        <div class="item" v-for='item in items'>
                            <img src="./imgs/login_logo.jpeg">
                            <div class="item_title">{{item}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal">
            <div class="profile">
                <div class="left swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <img height ="100%" width="100%" src="http://img.xingzuo.com/Article/Picture/0/170/170081_20180323143532103_0.jpg">
                        </div>
                        <div class="swiper-slide">
                            <img height ="100%" width="100%" src="http://i.shangc.net/allimg/140904/17-140Z4163012-50.jpg">
                        </div>
                        <div class="swiper-slide">
                             <img height ="100%" width="100%" src="http://i.shangc.net/allimg/140904/17-140Z4163013-50.jpg">
                         </div>
                         <div class="swiper-slide">
                             <img height ="100%" width="100%" src="http://www.xnnews.com.cn/wenyu/lxsj/201701/W020170118848371118225.jpg">
                         </div>
                    </div>
                    <div class="swiper-pagination"></div>
                </div>
                <div class="right">
                    <h3>花语</h3>
                    <span class="title">性别:</span>
                    <span>女</span>

                    <br> 
                    <span class="title">故乡:</span>
                    <span>四川-达州</span>
                    
                    <br>
                    <span class="title">身高:</span>
                    <span>155</span>

                    <br>
                    <span class="title">体重:</span>
                    <span>保密</span>
                   
                    <br>
                    <h3>希望TA</h3>
                    <span>保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密保密</span>
                </div>
            </div>
        </div>

    </body>

    <script type="text/javascript">

        $('.modal').on('click',function () {
            $('.modal').css({'display':'none'});
        });

        var mySwiper = new Swiper('.left',{
            loop: true, //用来循环播放
            pagination: {
                el: '.swiper-pagination',
            },
            pagination: '.banner-pagination', //显示焦点按钮
            paginationClickable: '.banner-pagination', //焦点按钮可点击
        });  
        
        //--------------
        new Vue({
            el:'.container',
            data:{
                name:'jeking',
                menu:[
                    {icon:'iconfont icon-185080bubblelovestreamlinetalk',title:'我中意的'},
                    {icon:'iconfont icon-xihuan',title:'喜欢我的'},
                    {icon:'iconfont icon-31haoyou',title:'我的好友'},
                ],
                items:['001','002','003','004','005',]
            },
            methods:{
                itemclickAction:function() {
                     $('.modal').css({'display':'flex'}); 
                }
            }
        })
    </script>
</html>
